<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Jump faceSpan</title>
        <script src="jquery.min.js"></script>
        <style>
            body {
                height: 3000px;
            }
        </style>
    </head>
    <body>
        <script>
            (function(){
                function clickAnima(arr,e){
                    //创建表情盒子
                    var ele = $('<span></span>');
                    //获取点击的位置
                    var offsetLeft = e.clientX;
                    var offsetTop = e.clientY;
                    //循环表情数组
                    if(tmp == arr.length){
                        tmp = 0;
                    }
                    //将表情插入页面，设置动画
                    ele.appendTo($('html'));
                    ele.css({'position':'fixed','left':offsetLeft,'top':offsetTop}).text(arr[tmp]).animate({'top':'-66px','opacity':0},2000,function(){
                        ele.remove();    //动画结束后删除元素
                    });
                    tmp++;
                }
                //鼠标点击出现动画
                var tmp = 0;
                $('html').click(function(e){
                    var arr = ['_(´ཀ`」∠)_','๑•̀ω•́)و✧','(ง •̀_•́)ง','◕‿◕'];
                    clickAnima(arr,e)
                })
            }())

        </script>
    </body>
</html>